<template>
  <div class="Search-advice">
    <div class="title">
      <h6 @click="handleclick(keywords)">搜索"{{ keywords }}"</h6>
    </div>
    <ul>
      <li v-for="(item, index) in searchList" :key="index" 
      @click.stop="handleclick(item.keyword)">
        <i></i>
        <div>
          {{ item.keyword }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["keywords"],
  data() {
    return {
      searchList: [],
    };
  },
  created() {
    this.getkeywords();
  },
  watch: {
    keywords() {
      if(this.keywords=="")return;
      this.getkeywords();
    },
  },
  methods: {
    getkeywords() {
      this.axios
        .get("/search/suggest", {
          params: { keywords: this.keywords, type: "mobile" },
        })
        .then((result) => {
          this.searchList = result.data.result.allMatch;
        });
    },
    handleclick(item){
      console.log('我执行里');
      console.log(this.$parent.adviceShow);
      this.$parent.adviceShow='SearchResult';
      this.$emit('chan-component',{com:'SearchResult',text:item})
    }
  },
};
</script>

<style  lang="less" scoped>
@border-color:rgb(238, 236, 236);
.title {
  color: #507daf;
  padding: 15px 0 0 10px;
  h6 {
    border-bottom: 1px solid @border-color;
    padding-bottom: 15px;
  }
}
.Search-advice{
ul {
  li {
    display: flex;
    align-items: center;
    padding-left:10px;
    i {
      background: url();
      width: 15px;
      height: 15px;
    }
    div {
      flex: 1;
      border-bottom: 1px solid @border-color;
      padding: 10px 10px 10px 10px;
    }
  }
}
}
</style>